<template>
  <div
    class="main-content-wrapper"
    :style="{
      padding,
      ...mainContentWrapperStyle,
    }"
    :backGroundType="backGroundType"
  >
    <!-- <div class="main-content-wrapper-left" v-if="showLeft"></div> -->
    <div
      class="main-content-wrapper-center"
      :style="{
        minWidth: mainContentMinWidth,
        ...mainContentStyle,
      }"
    >
      <slot></slot>
    </div>
    <!-- <div class="main-content-wrapper-right" v-if="showRight"></div> -->
  </div>
</template>
<script setup>
defineProps({
  showLeft: {
    type: Boolean,
    default: true,
  },
  showRight: {
    type: Boolean,
    default: true,
  },
  backGroundType: {
    type: String,
    default: null,
  },
  mainContentWrapperStyle: {
    type: [Object, String],
    default: null,
  },
  mainContentStyle: {
    type: [Object, String],
    default: null,
  },
  padding: {
    type: String,
    default: null,
  },
  // 主要内容最小宽度
  mainContentMinWidth: {
    type: String,
    default: null,
  },
});
</script>
<style lang="scss" scoped>
.main-content-wrapper {
  display: flex;
  justify-content: center;
  background-color: #fff;
  height: 100%;
  .main-content-wrapper-center {
    width: 100%;
    overflow: hidden;
    overflow: auto;
  }
}
</style>
